import React, { Component } from 'react'
import Left from './components/Left'
import Title from './components/Title'
import Main from './components/Main'

import axios from './utils/axios'

export class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
    list:[],
    leftid:''
    }
  }
  componentDidMount() { 
    axios.get("/list").then((res)=>{
      res.data[0].flag=true
      this.setState({
        list:res.data,
        leftid:res.data[0].id
      
      })

    })
   }
   onchangeleft(id){
    let { list, leftid }=this.state
     list.forEach((item)=>{
       if(item.id===id){
         item.flag=true
         leftid=item.id
       }
     })
     this.setState({
       list,
       leftid
     })
   }
   onchangetitle(id){
     let {list,leftid}=this.state
     list.forEach((item)=>{
       if(item.id==id){
        leftid=item.id

       }
     })
     this.setState({
       leftid
     })

   }

   del(id){
       let {list}=this.state
       list.forEach((item)=>{
         if(item.id==id){
           item.flag=false
         }

       })
     this.setState({
       list
     })
   }
  render() {
    const {list,leftid}=this.state
    return (
      <div className='App'>
        <Left list={list} leftid={leftid} onchangeleft={this.onchangeleft.bind(this)} >
          <h1>111</h1>
        </Left>
        <div className='right'>
          <Title list={list} del={this.del.bind(this)} onchangetitle={this.onchangetitle.bind(this)} leftid={leftid}></Title>
          <Main list={list} leftid={leftid}></Main>
        </div>
      </div>
    )
  }
}

export default App
